*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #fff;
    color: #555;
    font-family: 'Avenir Next', 'Lantinghei SC';
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.wrap{
    width: 100%;
    height: 600px;
   /* position: absolute;*/
    top: 50%;
    /*margin-top: -300px;*/
    background-color: #333;
    overflow: hidden;
    perspective: 800px;
    -webkit-perspective: 800px;
}
/* 海报样式 s*/
.photo{
    position: absolute;
    width: 260px;
    height: 320px;
    z-index: 1;
    box-shadow: 0 0 1px rgba(0, 0, 0, .01);
    transition: all .5s;
    -moz-transition: all .5s; /* Firefox 4 */
    -webkit-transition: all .5s; /* Safari 和 Chrome */
    -o-transition: all .5s; /* Opera */
}

.photo .photo-wrap .side{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #eee;
    top: 0;
    right: 0;
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;    /* Chrome 和 Safari */
    -moz-backface-visibility:hidden;     /* Firefox */
    -ms-backface-visibility:hidden;     /* Internet Explorer */
}


.photo .photo-wrap .side-front{

    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

.photo .photo-wrap .side-front .image{
    width: 100%;
    height: 250px;
    line-height: 250px;
    overflow: hidden;
}
.photo .photo-wrap .side-front .image img{
    width: 100%;
    vertical-align: middle;/*使高度不够的图片居中显示*/
}
.photo .photo-wrap .side-front .caption{
    text-align: center;
    font-size: 16px;
    line-height: 50px;
}
/* 初始化时使 side-back 沿Y轴旋转180度，即在背面显示 */
.photo .photo-wrap .side-back{
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}
.photo .photo-wrap .side-back .desc{
    color: #666;
    font-size: 14px;
    line-height: 1.5em;
}
/*当前选中的海报样式*/
.photo_center{
    top: 50%;
    left: 50%;
    margin: -160px 0 0 -130px;
    z-index: 500;
}
/*负责翻转*/
.photo .photo-wrap{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;/* Safari 和 Chrome */
    -moz-transition: all .5s; /* Firefox 4 */
    -o-transition: all .5s; /* Opera */
    transform-origin: 0% 50% 0px;
    -ms-transform-origin: 0% 50% 0px;/* IE 9 */
    -o-transform-origin: 0% 50% 0px;/* Opera */
    -webkit-transform-origin: 0% 50% 0px;/* Safari 和 Chrome */
    -moz-transform-origin: 0% 50% 0px;/* Firefox */
}
.photo_front .photo-wrap{
    transform: translate(0px, 0px) rotateY(0deg);
    -webkit-transform: translate(0px, 0px) rotateY(0deg);
    -moz-transform: translate(0px, 0px) rotateY(0deg);
    -o-transform: translate(0px, 0px) rotateY(0deg);
    -ms-transform: translate(0px, 0px) rotateY(0deg);
}
.photo_back .photo-wrap{/* .photo_back 是添加到 div.photo 的类*/
    transform: translate(260px, 0px) rotateY(180deg);
    -webkit-transform: translate(260px, 0px) rotateY(180deg);
    -moz-transform: translate(260px, 0px) rotateY(180deg);
    -o-transform: translate(260px, 0px) rotateY(180deg);
    -ms-transform: translate(260px, 0px) rotateY(180deg);
}


/* 添加控制按钮的样式 */
@font-face{
    font-family: 'icomoon';
    src: url('../fonts/icomoon.woff') format('woff');
    font-weight: normal;
    font-size: default;
}
.nav{
    position: absolute;
    width: 80%;
    left: 10%;
    height: 30px;
    line-height: 30px;
    bottom: 20px;
    z-index: 3;
    text-align: center;
}
/* 普通样式 */
.nav .i{
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-color: #aaa;
    text-align: center;
    border-radius: 50px;
    transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -o-transform: scale(.5);
    -ms-transform: scale(.5);

    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}
/* 设置并显示字体图标 */
.nav .i:after{
    content: '\e965';
    font-family: 'icomoon';
    font-size: 80%;
    display: inline-block;
    line-height: 30px;
    text-align: center;
    color: #fff;
    opacity: 0;
}
/* 选中样式 */
.nav .i_current{
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
}
.nav .i_current:after{
    opacity: 1;
}
/* 背面样式 */
.nav .i_back{
    background-color: #555;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}